<template>
  <div class="">
    <el-card>
      <div class="t-left">
        <el-input placeholder="请输入内容" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <el-button type="primary" @click="addGoods">添加商品</el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="goodsList" stripe style="width: 100%">
        <el-table-column prop="goods_name" label="商品名称" width="500">
        </el-table-column>
        <el-table-column prop="goods_price" label="商品价格(元)" width="180">
        </el-table-column>
        <el-table-column prop="goods_number" label="商品数量">
        </el-table-column>
        <el-table-column prop="add_time" label="创建时间">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <el-button type="primary" class="el-icon-edit" size="small" @click="editGoods(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button type="danger" class="el-icon-delete" size="small"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>

      </el-table>


    </el-card>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        // 商品列表参数
        queryInfo: {
          query: '',
          pagenum: '1',
          pagesize: 5
        },
        // 商品列表数据
        goodsList: [],
      }
    },
    created() {
      this.getGoodsList()
    },
    mounted() {},
    watch: {},
    computed: {},
    methods: {
      getGoodsList() {
        this.$axios.get('goods', {
          params: this.queryInfo
        }).then(val => {
          console.log(val);
          this.goodsList = val.data.goods
          console.log(this.goodsList);
        })
      },
      // 添加商品按钮
      addGoods() {
        this.$router.push('/goods/add')
      },
      // 编辑按钮
      editGoods(row) {
        console.log(row);
      }
    },
  }

</script>
<style lang="css" scoped>
  .el-input {
    width: 400px;
  }

  .t-left {
    text-align: left;
  }

</style>
